<template>
  <el-row class="exception-container" type="flex" align="middle">
    <component :is="iconNameMap[status]" />
    <h3 class="title">{{titleMap[status]}}</h3>
    <p class="subtitle">{{subtitleMap[status]}}</p>
    <el-button type="primary" @click="$router.replace('/dashboard')">返回首页</el-button>
  </el-row>
</template>

<script setup>
// eslint-disable-next-line
defineProps({
  status: {
    type: Number,
    required: true
  },
  iconName: {
    type: String
  },
  btnText: {
    type: String,
    default: '返回首页'
  },
  titleMap: {
    type: Object,
    default: () => ({
      404: '404',
      403: '403',
      500: '500',
      502: '502'
    })
  },
  subtitleMap: {
    type: Object,
    default: () => ({
      404: '找不到此网页',
      403: '您没有权限访问',
      500: '服务器繁忙，快去找后端的同志吧',
      502: '网关错误，又可以摸鱼了'
    })
  }
})

const iconNameMap = {
  404: 'my-icon-notfound',
  403: 'my-icon-forbidden',
  500: 'my-icon-service-error',
  502: 'my-icon-service-error'
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>